<template>
  <detail-dialog
    ref="detailDialog"
    :showChart="showChart"
    :dialogTitle="dialogTitle"
    :tableTitle="tableTitle"
    :tableLabel="tableLabel"
    :tableData="tableData"
    :selection="selection"
    :showExport="showExport"
    :page="page"
    :formData="formData"
    :formItem="formItem"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @handleSearch="handleSearch"
    @handleExport="handleExportHost"
  />
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import { portaAalarm } from '@/api/chartDetail.js'
import Cookies from 'js-cookie'
import { exportExcel } from '@/utils/improtFile.js'
export default {
  props: {
  },
  data () {
    return {
      showChart: false,
      showExport: true,
      dialogTitle: '告警详情',
      tableTitle: '告警详情列表',
      tableLabel: [
        { label: '告警IP', param: 'ip', align: 'center', minWidth: '8%', sortable: false, isShow: true },
        { label: '告警级别', param: 'levelName', align: 'center', minWidth: '8%', sortable: false, isShow: true },
        { label: '区域', param: 'area', align: 'center', minWidth: '8%', sortable: false, isShow: true },
        { label: '告警内容', param: 'alarmContext', align: 'center', minWidth: '50%', sortable: false, isShow: true },
        {
          label: '告警状态',
          param: 'alarmStatus',
          align: 'center',
          minWidth: '10%',
          sortable: false,
          isShow: true,
          render: (row) => {
            if (row.alarmStatus === 'alarm') {
              return '告警触发'
            } else if (row.alarmStatus === 'alarmResumed') {
              return '告警撤销'
            }
          }
        },
        { label: '告警对象的类型', param: 'moType', align: 'center', minWidth: '10%', sortable: false, isShow: true }
      ],
      tableData: [],
      selection: 'index',
      page: {
        pageNo: 1,
        pageSize: 14,
        total: 0
      },
      detailVal: {},
      searchParams: {},
      formData: {
        alarmContext: '',
        area: '',
        moType: ''
      },
      level: '',
      formItem: [
        {type: 'input', label: '告警内容', name: 'alarmContext'},
        {type: 'input', label: '告警对象类型', name: 'moType'},
        {type: 'select', label: '告警状态', name: 'alarmStatus', options: [{label: '告警触发', value: 'alarm'}, {label: '告警撤销', value: 'alarmResumed'}]}
      ]
    }
  },
  components: {
    DetailDialog
  },
  methods: {
    init (val) {
      this.detailVal = val
      // 清空数据
      this.searchParams = {}
      for (let item in this.formData) {
        this.formData[item] = ''
      }
      this.getData()
      this.$refs.detailDialog.init()
    },
    // 获取数据
    getData () {
      let data = {
        words: JSON.stringify(this.searchParams),
        page: this.page.pageNo,
        limit: this.page.pageSize
      }
      // 查询参数处理
      if (this.detailVal.name === '紧急') {
        this.level = 5
      } else if (this.detailVal.name === '高') {
        this.level = 4
      } else if (this.detailVal.name === '中') {
        this.level = 3
      } else if (this.detailVal.name === '低') {
        this.level = 2
      } else if (this.detailVal.name === '提示') {
        this.level = 1
      }
      data.level = this.level
      portaAalarm(data).then(res => {
        let levelArr = [
          {level: '5', name: '紧急'},
          {level: '4', name: '高'},
          {level: '3', name: '中'},
          {level: '2', name: '低'},
          {level: '1', name: '提示'}
        ]
        let statusArr = [
          {alarmStatus: '2', name: '告警触发'},
          {alarmStatus: '3', name: '告警触发'},
          {alarmStatus: '4', name: '告警撤销'}
        ]
        if (res.code === 200) {
          // 展示数据处理
          res.data.content.forEach(element => {
            levelArr.forEach(el => {
              if (element.level === el.level) {
                element.levelName = el.name
              }
            })
            statusArr.forEach(el2 => {
              if (element.alarmStatus === el2.alarmStatus) {
                element.alarmStatusName = el2.name
              }
            })
          })
          this.tableData = res.data.content
          this.page.total = parseInt(res.data.total)
        }
      })
    },
    // 查询
    handleSearch (data) {
      this.searchParams = {...data}
      this.getData()
    },
    // 数据列表导
    handleExportHost () {
      let url = `/btos/es/alarm/export`
      let data = {
        token: Cookies.get('token'),
        level: this.level,
        words: JSON.stringify(this.searchParams) !== '{}' ? JSON.stringify(this.searchParams) : ''
      }
      exportExcel(url, data).then(res => {})
    },
    // 每页数量改变
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getData()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getData()
    }
  }
}
</script>
